GIF - Graphics Interchange Format

GIF はビットマップの 1 つであり、最も多用されているグラフィック形式です。 1990 年に Tim Berners-Lee と Robert Cailliau によって World Wide Web が考案される前から、GIF 形式は 1987 年以降、CompuServe Information Service で使用されていました。人気のある圧縮形式として既に普及していたため、初期の Web ブラウザで採用されました。

3D 棒グラフを示す GIF グラフィックの例。

GIF 形式では、カラーパレットが 256 色(8 ビット)以下に制限されています。 それでも、画面キャプチャなどの多くのグラフィックで、十分な品質を確保できます。

RoboHelp ツールバーのアイコンを示す GIF スクリーンショットの例。

圧縮

Lempel-Zev-Welch(LZW)コーデックを使用することで、ファイルサイズを非常にコンパクトにします。 この可逆的な方法では、特に単一色やある色から別の色へのグラデーションが使用されている部分で、画像品質を保ちながら不要なデータを削除できます。 また、繰り返し保存しても品質が低下しません。

LZW 圧縮は、パターン認識に基づいています。 このアルゴリズムでは、各行のピクセルを調べて隣のピクセルが同じ色であるかどうかを評価します。 結果はインデックス、つまり Color Lookup Table(CLUT)に保存されます。

このテーブル内の色は 24 ビットですが、保存されているのは 256 色だけです。

透過性

背景カラーやテクスチャを使用している場合、透過 GIF を配置することで、グラフィックがまるで背景の上に浮かんでいるかのように見せることができます。

ビットマップグラフィックは常に四角形です。 そのため、背景が単色またはテクスチャであるページに、塗りつぶした形状やテキストを表示すると、見栄えが悪くなる場合があります。 以下の例では、灰色の背景を透明色として指定します。

灰色を透明の背景カラーとして割り当てる前の GIF の例。

...これを透明にすると、以下のように表示されます。

背景が透明になった GIF の例。

透過 GIF を作成する場合、作成者は画像エディタを使用して、特定の 1 色を透明なピクセルとして割り当てます。 このとき、通常は、灰色やオレンジなどの背景カラーや、メインの画像領域で多用されていない色を指定します。 Web ブラウザによりその色が無効になると、背景が透けて見えます。 以下の例では、左の画像を囲んでいる白い色は、右の画像にもあります(JPG)。 しかし、白い色は透明色として割り当てられているので、画像が四角ではなく円として表示されます。

3 つの GIF の説明

この GIF には透明色がありません

白の背景が透明であり、ギザギザの輪郭を滑らかにするためにアンチエイリアスが適用されています

問題:背景を暗くすると、アンチエイリアスが原因で円の周りに「光の輪」が表示されます

 

注意:透過 GIF でアンチエイリアスのテクニックをテキストや形状に使用するときは、注意が必要です。 アンチエイリアスにより、テキストや形状を囲む輪郭に、見栄えの悪い「光の輪」が表示されることがあります。

アニメーション

GIF 形式が持つもう 1 つの特性は、アニメーションを実装できることです。 つまり、1 つの GIF の内部に、連続する複数の GIF 画像をまとめて保存できます。 これらの画像がユーザに対して順番に表示されることで、流れるようなアニメーションになります。 これらのシーケンスは、ループ処理により一定の回数だけ再生するか無限に繰り返して再生することができます。

ヒント:以下は、連続する 5 つのクマノミの画像とそれを基に作成したアニメーション GIF です。 この効果を出すために、水中を撮影したビデオの .AVI ファイルからフレームをいくつか選択して、個々の GIF ファイルに変換しました。 GIF の保存時にループ属性を選択し、Web ブラウザで繰り返し再生されるようにしました。

アニメーション GIF ファイルを 1 つコンパイルして作成するための、アニメーションシーケンスである 5 つのクマノミの画像。

イソギンチャクで遊ぶクマノミのアニメーション GIF。

重要:アニメーション GIF を使用する場合は、アニメーション化自体が目的となってアニメーションが無意味なものにならないように、ストーリー性を持たせたり何らかの活動を実演したりします。 上の例では、他の魚であれば触手で刺すイソギンチャクも、クマノミに対しては宿主となって共生関係を結んでいることを示しています。

使用事例

GIF 形式は、単純なグラフ、基本的な形状、線の描画、スクリーンショットに適しています。 圧縮比が約 4:1 である、様々な色を含む写真には適していません。主な利点は、可逆圧縮方法であるという点です。